<template>
  <div class="updimg-box">
    <div class="updateImg-box" v-loading="loading">
      <div class="update-box">
        <div>
          <el-upload
            class="upload-demo"
            action="string"
            :http-request="updateimgs"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :limit="1"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>

          <div class="updateSure">
            <el-button size="small" type="success" @click="updateOut"
              >退出</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "UpdateImg",
  data() {
    return {
      fileList: [],
      updateOuts: "",
      loading: false,
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePreview(file) {
      console.log(file);
    },
    updateOut() {
      this.updateOuts = false;
      this.$emit("childByOut", this.updateOuts);
      location.reload();
    },
    updateimgs(file) {
      this.loading = true;
      let params2 = new FormData();
      params2.append("file", file.file);
      console.log(params2);
      request({
        url: "/user/upload",
        method: "post",
        data: params2,
        params: {
          userId: sessionStorage.getItem("userid"),
        },
        processData: false,
        contentType: false,
      })
        .then((res) => {
          this.loading = false;
          this.$alert("图片上传成功", {
            confirmButtonText: "确定",
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.updimg-box {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  position: fixed;
  top: 1rem;
  margin: 0 auto;
}

.updateImg-box {
  width: 3.2rem;
  margin: 0 auto;
  background-color: #a1c1ee;
  font-size: 0.12rem;
  text-align: center;
  border-radius: 0.1rem;
  padding-top: 0.2rem;
}

.update-box {
  width: 3.2rem;
  height: 1.8rem;
  background-color: #a1c1ee;
  border-radius: 0.1rem;
}

.updateSure {
  position: absolute;
  bottom: 0.15rem;
  left: 45%;
}

.updateSure button {
  width: 1rem;
}

.updateSure2 button {
  width: 1rem;
}
</style>